Skip to content

feat(career): 未保存時の離脱確認（× 閉じ/リロード）を追加#313

Merged
yusuke0610 merged 1 commit into
mainfrom
feat/career-unsaved-changes-warning
Jun 9, 2026
Merged

feat(career): 未保存時の離脱確認（× 閉じ/リロード）を追加#313
yusuke0610 merged 1 commit into
mainfrom
feat/career-unsaved-changes-warning

Conversation

@yusuke0610

@yusuke0610 yusuke0610 commented Jun 9, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Owner

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

  • useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
  • CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
  • ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

  • 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
  • アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

  • make test-frontend … 293 pass
  • make lint-frontend / make lint-frontend-messages … clean
  • make build-frontend … 型エラーなし
  • E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

  • Tests

    • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

@yusuke0610 @claude
feat(career): 未保存時の離脱確認（× 閉じ/リロード）を追加
31c72b2 
ログイン済みで未保存の変更がある状態で × 閉じ・リロードした際、
ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぐ。
formCache は redux-persist の blacklist のためリロードで消えることへの対策。

- useUnsavedChangesWarning フックを追加（beforeunload ガード）
- CareerResumeForm で isAuthenticated && dirty.any のとき有効化
- 未ログインは sessionStorage 退避で対象外、アプリ内遷移は Redux 保持で対象外

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)
  • frontend/src/components/forms/CareerResumeForm.tsx
  • frontend/src/hooks/useUnsavedChangesWarning.test.ts
  • frontend/src/hooks/useUnsavedChangesWarning.ts
📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s) Summary
useUnsavedChangesWarning hook implementation
frontend/src/hooks/useUnsavedChangesWarning.ts		 A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage
frontend/src/hooks/useUnsavedChangesWarning.test.ts		 Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration
frontend/src/components/forms/CareerResumeForm.tsx		 Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/career-unsaved-changes-warning

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@yusuke0610
yusuke0610 merged commit b5da895 into main Jun 9, 2026
18 checks passed
@yusuke0610 yusuke0610 mentioned this pull request Jun 9, 2026
Merged
@yusuke0610
yusuke0610 deleted the feat/career-unsaved-changes-warning branch June 10, 2026 05:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@yusuke0610